<template>
  <tm-sheet
    :color="props.color"
    :followTheme="props.followTheme"
    :dark="props.dark"
    :followDark="props.followDark"
    :round="props.round"
    :shadow="props.shadow"
    :outlined="props.outlined"
    :border="props.border"
    :borderStyle="props.borderStyle"
    :borderDirection="props.borderDirection"
    :text="props.text"
    :transprent="props.transprent"
    :linear="props.linear"
    :linearDeep="props.linearDeep"
    :width="props.width"
    :height="props.height"
    :margin="props.margin"
    :padding="props.padding"
  >
    <view class="flex flex-row flex-row-top-start">
      <view
        v-if="ctl.avatar"
        class="mr-24"
        style="min-width: 60rpx; align-items: stretch"
      >
        <tm-avatar
          :round="12"
          @click="emits('avatar-click', $event)"
          :followTheme="props.followTheme"
          :dark="props.dark"
          :followDark="props.followDark"
          :size="60"
          :img="ctl.avatar"
        ></tm-avatar>
      </view>
      <view class="flex flex-9 flex-col wh5">
        <view class="flex flex-row" :class="[_align.time]">
          <slot name="author">
            <tm-text
              @click="emits('author-click', $event)"
              :followTheme="props.followTheme"
              :dark="props.dark"
              :followDark="props.followDark"
              :color="ctl.authorColor"
              :fontSize="ctl.authorFontSize"
              :label="ctl.author"
            ></tm-text>
          </slot>
          <slot name="time">
            <tm-text
              @click="emits('time-click', $event)"
              v-if="_time"
              :followTheme="props.followTheme"
              :dark="props.dark"
              :followDark="props.followDark"
              _class="pl-24 opacity-5"
              :fontSize="22"
              :label="_time"
            ></tm-text>
          </slot>
        </view>
        <view class="flex flex-col py-12">
          <slot name="content">
            <tm-text
              @click="emits('content-click', $event)"
              :followTheme="props.followTheme"
              :dark="props.dark"
              :followDark="props.followDark"
              :fontSize="28"
              :label="ctl.content"
            >
            </tm-text>
          </slot>
        </view>
        <view class="flex flex-row flex-1 flex-nowrap" :class="[_align.action]">
          <slot name="actions">
            <!-- <view class="flex flex-row flex-center pl-16">
							<tm-icon :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :font-size="24" name="tmicon-comment-dots"></tm-icon>
							<tm-text :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" _class="pl-10"  :font-size="24" label="125"></tm-text>
						</view>
						<view class="flex flex-row flex-center pl-16">
							<tm-icon :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :font-size="24" name="tmicon-md-heart"></tm-icon>
							<tm-text :followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" _class="pl-10" :font-size="24" label="125"></tm-text>
						</view> -->
          </slot>
        </view>
        <tm-divider v-if="ctl.borderBottom"></tm-divider>
        <slot></slot>
      </view>
    </view>
  </tm-sheet>
</template>

<script lang="ts" setup>
/**
 * 评论
 * @description 评论可以嵌套使用。
 * @template default,author,time,content,actions
 * @emits ['avatar-click','author-click','content-click','time-click']
 */
import {
  getCurrentInstance,
  computed,
  ref,
  provide,
  inject,
  onUpdated,
  onMounted,
  onUnmounted,
  nextTick,
  watch,
  PropType,
} from "vue";
import { cssstyle, tmVuetify, colorThemeType } from "../../tool/lib/interface";
import {
  custom_props,
  computedTheme,
  computedClass,
  computedStyle,
  computedDark,
} from "../../tool/lib/minxs";
import tmSheet from "../tm-sheet/tm-sheet.vue";
import tmText from "../tm-text/tm-text.vue";
import tmIcon from "../tm-icon/tm-icon.vue";
import tmDivider from "../tm-divider/tm-divider.vue";
import tmAvatar from "../tm-avatar/tm-avatar.vue";
const emits = defineEmits([
  "avatar-click",
  "author-click",
  "content-click",
  "time-click",
]);
const props = defineProps({
  ...custom_props,
  shadow: {
    type: [Number],
    default: 0,
  },
  round: {
    type: [Number],
    default: 4,
  },
  border: {
    type: [Number],
    default: 0,
  },
  width: {
    type: [Number],
    default: 0,
  },
  height: {
    type: [Number],
    default: 0,
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [32, 8],
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [24, 24],
  },
  transprent: {
    type: [Boolean],
    default: false,
  },
  color: {
    type: String,
    default: "white",
  },
  //是否显示底部的边线。
  borderBottom: {
    type: [Boolean],
    default: false,
  },
  author: {
    type: String,
    default: "",
  },
  authorColor: {
    type: String,
    default: "primary",
  },
  authorFontSize: {
    type: Number,
    default: 26,
  },
  avatar: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  time: {
    type: String,
    default: "",
  },
  //时间和下面的操作按钮是靠左还是靠右。
  align: {
    type: String,
    default: "right", //right,left
  },
  // 自动格式化时间
  autoFormatTime: {
    type: Boolean,
    default: true,
  },
});

// 距离当前时间段。
const _time = computed(() => {
  if (!props.autoFormatTime) return props.time;
  return uni.$tm.u.getDateToNewData(props.time);
});

const _align = computed(() => {
  let agn = {
    time: "flex-between",
    action: "flex-row-center-end flex-1",
  };
  if (props.align == "left") {
    agn = {
      time: "flex-start",
      action: "flex-row-center-start",
    };
  }
  return agn;
});
const ctl = computed(() => {
  return {
    time: props.time,
    content: props.content,
    author: props.author,
    authorColor: props.authorColor,
    avatar: props.avatar,
    authorFontSize: props.authorFontSize,
    borderBottom: props.borderBottom,
  };
});
</script>

<style scoped>
.wh5 {
  width: 0;
}
</style>
